<template>
    <div class="content">
      <div class="nav-bar">
        <div style="height: 60px;">
          <transition name="el-fade-in-linear">
            <div v-if="$route.path == '/list' && !$store.state.mailist.show_search">
              <a class="nav-bar-option"><span>maimai <b>wiki</b></span></a>
              <i class="el-input__icon el-icon-search is-clickable" style="color: #fff" @click="openSearch()"></i>
            </div>
          </transition>
          <transition name="el-fade-in-linear">
            <div v-if="$route.path == '/detail' && !$store.state.mailist.show_search">
              <router-link to="/list" class="nav-bar-option"><i class="el-icon-arrow-left"></i><span><b>返回列表</b></span></router-link>
            </div>
          </transition>

          <transition name="el-fade-in-linear">
            <div style="color: #fff;"  v-show="$store.state.mailist.show_search">
              <div style="float: left; position: absolute; left: 15px; top: 18px;" @click="back()">返回</div>
              <div style="position: absolute; right: 1px; top: 14px; float: right; width: 80%">
                <input type="text" align="left"  placeholder="输入曲名..."  class="search-input" id="search-ipt" v-model="search_input"/>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>

</template>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  ::-webkit-input-placeholder{
    color:#fff;
    font-size 15px;
  }
  .nav-bar
    background:rgba(255, 73, 73, 0.8);
    position fixed;
    top:0;
    width 100%;
    z-index 200;
    border-bottom solid 1px #e1e1e1
    a
      color: #ffffff;
      float: left;
      text-decoration:none;
    .search-input {
      color: #fff;
      background: none;
      border: none;
      border-bottom: 1px solid #fff;
      width: 80%;
      font-size: 18px;
      padding-left: 1px;
    }
    .nav-bar-option
      position: absolute; left: 10px; top: 19px;

</style>
<script>
  export default {
    data() {
      return {
        search_input: '',
        doing_search: false
      }
    },
    mounted() {
//      setInterval(() => {this.show_search = !this.show_search;}, 1000) ;
    },
    methods: {
      handleIconClick(ev) {
        console.log(ev);
      },
      openSearch() {
        this.$store.commit('SHOW_SEARCH', true);
        document.getElementById('search-ipt').focus();
      },
      doSearch() {
        window.scrollTo(0, 0);
        if (this.$route.path == '/detail') {
          this.$router.push('/list');
        }
        if (!this.doing_search) {
          this.doing_search = true;
          this.$store.commit('SHOW_LIST', false);
          setTimeout(() => {
            this.doing_search = false;
            this.$store.commit('SET_SEARCH_LV', 0);
            this.$store.commit('SET_GENERA', 0);
            this.$store.commit('CLEAR_LIST');
            this.$store.commit('CLEAR_PAGER');
            this.$store.commit('NO_MORE', false);
            this.$store.commit('SET_SEARCH_WORD', this.search_input);
            this.$store.dispatch('getMailist').then(() => {
              this.$store.commit('ADD_PAGE');
              this.$store.commit('SHOW_LIST', true);
            }).catch((res) => {
              if (res.no_more) {
                this.$message('没有找到相关曲目');
              }
            });
          }, 1000);
        }
      },
      back() {
        if (this.$route.path != '/detail') {
          this.search_input='';
          this.$store.commit('SHOW_SEARCH', false);
          this.doing_search=false;
        }
        else {
          this.$router.push('/list');
        }
      }
    },
    watch: {
      'search_input': 'doSearch'
    }
  }
</script>
